<template>
	<view class="register">
		<view class="from">
			<view class="input">
				<image src="/static/img/phone3.png" />
				<input type="number" placeholder="手机号" v-model="tel" @blur="checkTel" AUTOCOMPLETE="off" maxlength="11" />
				<text class="tip" v-show="isCheckOut">
					<i class="cubeic-right"></i>
					未注册
				</text>
			</view>
			<view class="input">
				<image src="/static/img/code3.png" />
				<input v-model="code" type="text" placeholder="请输入验证码" maxlength="4" AUTOCOMPLETE="off" />
				<rich-text class="code" @click="getImgCode()" :nodes="strings"></rich-text>
			</view>
			<view class="input">
				<image src="/static/img/password4.png" />
				<input v-model="smsCode" type="text" placeholder="请输入手机验证码" maxlength="6" AUTOCOMPLETE="off" />
				<text class="go-code" v-if="time > 0">{{ time }}秒后重新发送</text>
				<text class="go-code" v-else @click="go_code">发送验证码</text>
			</view>
			<view class="cut-off"></view>
			<view class="input">
				<image src="/static/img/password3.png" />
				<input v-model="password" type="password" placeholder="新密码" autocomplete="new-password" maxlength="16" />
			</view>
			<view class="input">
				<image src="/static/img/password3.png" />
				<input v-model="confirmPassword" type="password" placeholder="确认新密码" autocomplete="new-password" maxlength="16" />
			</view>
			<view class="button" @click="setNewPassword">确 定</view>
		</view>
	</view>
</template>

<script>
import loginApi from '../../../servers/shop/login.js';
export default {
	data() {
		return {
			time: 0,
			tel: '',
			imgCodePath: '',
			isCheckOut: false,
			code: '',
			password: '',
			confirmPassword: '',
			smsCode: '',
			strings: '',
			utoken: ''
		};
	},
	mounted() {
		this.getImgCode();
	},
	methods: {
		getImgCode() {
			loginApi.getImgCode().then(res => {
				console.log(res);
				if (res.code === 200) {
					this.imgCodePath = 'data:image/png;base64,' + res.data.img;
					this.strings = `<img style='width:100px;height:30px' src='${this.imgCodePath}' />`;
					this.utoken = res.data.utoken;
				}
			});
		},
		// 检查手机号是否可用
		checkTel() {
			if (!this.tel) return;
			console.log(this.tel);
			let data = {
				mobile: this.tel
			};
			loginApi.checkTel(data).then(res => {
				if (res.code === 200 && !res.subCode) {
					this.isCheckOut = true;
					if (this.isCheckOut) {
						uni.showModal({
							title: '提示',
							content: '您的手机号没有注册！'
						});
					}
				} else {
					this.isCheckOut = false;
					uni.showToast({
						title: '手机号可用',
						position: 'bottom'
					});
					return;
				}
			});
		},
		go_code() {
			if (this.isCheckOut) {
				uni.showModal({
					title: '提示',
					content: '您的手机号没有注册！'
				});
				return;
			}

			if (!this.code) {
				uni.showToast({
					title: '请输入图形验证码',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (this.code.length != 4) {
				uni.showToast({
					title: '请输入正确的图形验证码！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			let data = {
				bizCode: 2,
				imageCode: this.code,
				mobile: this.tel,
				utoken: this.utoken
			};
			// 发送手机验证码
			loginApi.sendTelMsg(data).then(res => {
				console.log(res);
				if (res.code === 200 && !res.subCode) {
					uni.showToast({
						title: '短信发送成功',
						icon: 'none',
						position: 'bottom'
					});
					this.time = 60;
					this.settime();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'bottom'
					});
				}
			});
		},
		setNewPassword() {
			if (!this.tel) {
				uni.showToast({
					title: '请输入手机号！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (this.isCheckOut) {
				uni.showToast({
					title: '手机号未注册！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (!this.code) {
				uni.showToast({
					title: '请输入图形验证码！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (this.code.length != 4) {
				uni.showToast({
					title: '请输入正确的图形验证码！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (!this.smsCode) {
				uni.showToast({
					title: '请输入手机验证码！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (this.smsCode.length != 6) {
				uni.showToast({
					title: '请输入正确的手机验证码！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (!this.password) {
				uni.showToast({
					title: '请输入新密码！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (this.password.length < 6) {
				uni.showToast({
					title: '请输入6及位数以上密码！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (!this.confirmPassword) {
				uni.showToast({
					title: '请输入确认密码！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			if (this.password !== this.confirmPassword) {
				uni.showToast({
					title: '两次输入的密码不一致！',
					icon: 'none',
					position: 'bottom'
				});
				return;
			}
			let data = {
				confirmPassword: this.confirmPassword,
				mobile: this.tel,
				password: this.password,
				smsCode: this.smsCode
			};
			loginApi.resetPwdByMobile(data).then(res => {
				if (res.code === 200 && !res.subCode) {
					uni.showToast({
						title: '重置密码成功！',
						icon: 'none',
						position: 'bottom'
					});

					uni.navigateTo({
						url: './login'
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'bottom'
					});
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.register {
	background: #fff;
	height: 100%;
	.from {
		.input {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #e1e1e1; /*no*/
			line-height: 40rpx;
			position: relative;
			image {
				position: absolute;
				width: 28rpx;
				height: 28rpx;
				left: 28rpx;
				top: 40rpx;
			}
			input {
				width: 100%;
				line-height: 40rpx;
				padding: 0 76rpx;
				box-sizing: border-box;
				font-size: 24rpx;
			}
			.tip {
				position: absolute;
				right: 22rpx;
				color: #bd3c8c;
				top: 32rpx;
			}
			.code {
				position: absolute;
				left: auto;
				right: 70rpx;
				width: 150rpx;
				top: 50%;
				margin-top: -15px;
				height: 30px;
			}
			.go-code {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				padding: 10rpx 21rpx;
				border-radius: 40rpx;
				background: #bd3c8c;
				color: #fff;
				font-size: 26rpx;
				text-align: center;
			}
		}
		.cut-off {
			/*分隔块*/
			border-bottom: 1rpx solid #e1e1e1; /*no*/
		}
		.button {
			line-height: 90rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			margin: 67rpx 34rpx;
			box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
		}
	}
	.letter_code {
		position: fixed;
		z-index: 100;
		background: #fff;
		width: 660rpx;
		left: 50%;
		top: 50%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		transform: translate(-50%, -50%);
		.title {
			text-align: center;
			font-size: 30rpx;
			font-weight: 900;
			margin-bottom: 30rpx;
		}
		.code_input {
			position: relative;
			width: 80%;
			margin: 0 auto;
			input {
				border: 1px solid #e1e1e1; /*no*/
				line-height: 80rpx;
				width: 50%;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
			image {
				position: absolute;
				right: 0;
				top: 10%;
				height: 80%;
			}
		}
		.code_refresh {
			line-height: 80rpx;
			color: #3292ff;
			overflow: hidden;
			text {
				display: inline-block;
				margin-right: 20%;
			}
		}
		.code_button {
			margin-top: 30rpx;
			text {
				text-align: center;
				display: inline-block;
				width: 40%;
				margin-left: 6.5%;
				line-height: 80rpx;
				border: 1px solid #e1e1e1; /*no*/
				font-size: 30rpx;
				border-radius: 5rpx;
			}
			.sub {
				background: #bd3c8c;
				border: 1px solid #bd3c8c; /*no*/
				color: #fff;
			}
		}
	}
}
</style>
